/*
 * @Author: giky 
 * @Date: 2018-12-06 17:05:15 
 * @Last Modified by: giky
 * @Last Modified time: 2019-03-06 17:17:43
 */

/* 动画22 */
.left_box,
.r-box,
.topen,
.tclose,
#layerBtnItem,
.floatBox {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
}
.testbk{
  border:1px solid #f00;
}
.topen{
  width:300px;
}
.tclose{
  width:100px;
}
.testl{
  float:left;
}
.testr{
  float:left;
}

.mClose{
  position: relative;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
}
.mOpen{
  visibility: visible;
  opacity: 1;
}

@-webkit-keyframes layui-zy {
  /* 从左往右滑入 */
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
  }
}
@keyframes layui-zy {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.layui-anim-zy {
  -webkit-animation-name: layui-zy;
  animation-name: layui-zy;
}

@-webkit-keyframes layui-yz {
  /* 从右往左滑入 */
  from {
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
    opacity: 1;
  }
}
@keyframes layui-yz {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-100%, 0, 0);
  }
}
.layui-anim-yz {
  -webkit-animation-name: layui-yz;
  animation-name: layui-yz;
}
.layui-anim-zy.layer-anim-close {
  -webkit-animation-name: layui-yz;
  animation-name: layui-yz;
}


.animate{
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;  
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden; /* Chrome and Safari */
  -moz-backface-visibility:hidden; /* Firefox */
  -ms-backface-visibility:hidden; /* Internet Explorer */
}

.flash(@speed: 1s) {
  -webkit-animation-duration: @speed;
  animation-duration: @speed;
  -webkit-animation-fill-mode: both; 
  animation-fill-mode: both; 
}
.tx-slow{
  .flash(1s)
}
.tx-fast{
  .flash(0.3s)
}
/* 摇晃  主页右上角消息铃铛*/
@keyframes mShake {
  0% {
    transform: rotate(30deg);
  }

  25% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-30deg);
  }
  75% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(30deg);
  }
}

@keyframes colorchange
{	/*创建动画，使用@keyframes规则*/
    0%{
        background:white;
    }
    50%{
        background:antiquewhite;
    }
    100%{
        background:white;
    }
}

@-webkit-keyframes colorchange
{	/*创建动画，使用@keyframes规则*/
    0%{
        background:white;
    }
    50%{
        background:antiquewhite;
    }
    100%{
        background:white;
    }
}

@-moz-keyframes colorchange
{	/*创建动画，使用@keyframes规则*/
    0%{
        background:white;
    }
    50%{
        background:antiquewhite;
    }
    100%{
        background:white;
    }
}

@keyframes hideIndex{
	0%{ opacity: 0; transform: translate(0, -100px) }
	100%{opacity: 1; transform: translate(0, 0) }
}